<template>
  <div id='resource' class="resourceManagement">
    
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

     <div class="container">
        <div class="handle-box">
          <el-button @click="dialogVisible = true" type="primary" icon="el-icon-plus"> 新增</el-button>
        </div>

        <el-table 
            :data="tableData"  
            row-key="id" 
            ref="multipleTable"
            header-cell-class-name="table-header"
            border default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column type="index" width="60" align="center">
          </el-table-column>
          <el-table-column prop="title" label="权限名称" align="center">
          </el-table-column>
          <el-table-column prop="url" label="菜单url"  align="center">
          </el-table-column>
          <el-table-column prop="sortNo" label="序号" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="160" >
            <template slot-scope="scope">
              <el-button type="success" size="mini"  icon="el-icon-plus" @click="handleAdd(scope.$index, scope.row)" v-show="!scope.row.classId">新增</el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit"   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger"  size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
     </div>


    <!-- 添加一级菜单 -->
    <el-dialog title="添加一级菜单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div>
        <el-form ref="addForm" :rules="rules" :model="addForm" label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="sortNo">
            <el-input v-model.number="addForm.sortNo"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="url">
            <el-input v-model="addForm.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">立即创建</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 添加二级菜单 -->
    <el-dialog title="添加二级菜单" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
      <div>
        <el-form ref="addSubForm" :rules="rules" :model="addSubForm" label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="addSubForm.title"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="url">
            <el-input v-model="addSubForm.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSubForm('addSubForm')">立即创建</el-button>
            <el-button @click="addDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  export default {
    name: 'resourceManagement',
    data() {
      return {
        dialogVisible: false,
        addDialogVisible: false,
        addForm: {
          title: '',
          sortNo: '',
          url: '',
          id: ''
        },
        addSubForm: {
          title: '',
          url: '',
          id: '',
          classId: ''
        },
        tableData: [{
          title: '',
          sortNo: '',
          url: ''
        }],
        type: true,
        rules: {
          title: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 5,
              message: '长度在 1 到 5 个字符',
              trigger: 'blur'
            }
          ],
          sortNo: [{
              required: true,
              message: '请输入序号',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: '必须为数字值'
            },
          ]
        },
      }
    },
    methods: {
      getTableData() { //获取后台数据
      this.$axios.get('/role/getResourceList').then(response => {
          this.tableData = response.data;
        }).catch(error => {
          alert(error.response.data.message)
        })
      },
      //   编辑一级菜单和二级菜单
      handleEdit(index, row) {
        console.log(index, row);
        this.type = false //type=false 说明是编辑一级菜单

        if (row.classId) { //二级
          this.addSubForm.id = row.id
          this.addSubForm.title = row.title
          this.addSubForm.url = row.url
          this.addSubForm.classId = row.classId
          this.addDialogVisible=true
        } else {
          // 编辑一级
          this.addForm.id = row.id
          this.addForm.title = row.title
          this.addForm.url = row.url
          this.addForm.sortNo = row.sortNo
          this.dialogVisible =true
        }
      },
      //   删除一级和二级
      handleDelete(index, row) {
        console.log(index, row);
        if (row.classId) {
          //   二级
          this.$confirm('确认删除此条数据吗？')
            .then(_ => {
              this.$axios.get('/role/deleteResourceById',{
                params:{
                        resourceId: row.id
                    }
                })
                .then(response => {
                this.getTableData();
              }).catch(error => {
                  console.log('error: ', error);
                  alert(error.response.data.message)
              })
            }).catch(_ => {});
        } else {
          this.$confirm('确认删除此条数据吗？')
            .then(_ => {
              this.$axios.get('/role/deleteResourceTypeById',{
                params:{
                        resourceTypeId: row.id
                    }
                }).then(response => {
                this.getTableData();
              }).catch(error => {
                if(error.response){
                  console.log('请求错误');
                  alert(error.response.data.message)
                }
              })
            }).catch(_ => {});
        }
      },
      //   添加二级菜单按钮
      handleAdd(index, row) {
        console.log(index, row);
        this.addDialogVisible = true
        this.addSubForm.id = row.id

      },
      //   关闭确定框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //   新增一级菜单 提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let title = this.addForm.title
            let sortNo = this.addForm.sortNo
            var url = this.addForm.url
            var resourceTypeId = this.addForm.id
            let obj={};
            if (this.type) {
              obj = {
                title: title,
                sortNo: sortNo,
                url: url
              }
            } else {
              obj = {
                title: title,
                sortNo: sortNo,
                url: url,
                resourceTypeId: resourceTypeId
              }
            }
            
             this.$axios.post('/role/updateResourceType', obj)
             .then(response => {
              this.getTableData();
              this.dialogVisible = false;
              this.type=true
            }).catch(error => {
              console.log(error);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //   添加二级菜单
      submitSubForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let title = this.addSubForm.title
            let classId = this.addSubForm.id
            let url = this.addSubForm.url
            let id = this.addSubForm.classId
            let obj ={};
            if (this.type) {
              obj = {
                classId: classId,
                title: title,
                url: url,
              }
              url='/role/getResourceType'
            } else {//修改
              obj = {
                classId: id,
                title: title,
                url: url,
                id: classId
              }
              url='/role/updateResourceType'
            }
            this.$axios.post('/role/updateResource', obj)
            .then(response => {
              this.getTableData();
              this.addDialogVisible = false
              this.type =true
              this.addSubForm.classId=''
            }).catch(error => {
              console.log(error);
              alert(error.response.data.message)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    mounted() {
      this.getTableData()
    }
  }

</script>
<style lang="scss" scoped>
.handle-box {
    margin-bottom: 10px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green{
  color:green
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

</style>
